<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
<head>




<script src="resources/jquery/jquery.js" type="text/javascript"></script>

<script type="text/javascript">




$(document).ready(function() {
	  
	cargaSubMarca();
	cargarSubCategoria();
	
	});

function refreshCombo(coMarca){
	
	$('#coMarca option').remove();
	$('#coSubMarca option').remove();
	$('#coCategoria option').remove();
	$('#coSubCategoria option').remove();
	
	
	
}


function traerMarcas(){
	
	
	$.ajax({
		type : 'POST',
		
		url : "doDevolverMarcas.htm"
	
		   
		success : refreshCombo
	});
	
}

function refresh(){
	
	traerMarcas();
	traerCategorias();
	
	cargaSubMarca();
	cargarSubCategoria();
	
	
}


function cargarSubCategoria(){
	
	$.ajax({
		type : 'POST',
		
		url : "doCargarSubCategoria.htm",
		data : {
			coCategoria : $("#coCategoria").val()
		},
		   
		success : cambiarComboSubCategoria
	});
	
	
	
}

function cambiarComboSubCategoria(data){

	$(data).each(function(index,item){

    getNuevoCombo='<option value="'+item.idSubCategoria+'">'+item.nombreSubCategoria+'</option>';

	      $("#coSubCategoria").append(getNuevoCombo);

	})



	}



	function cargaSubMarca() {

		$.ajax({
			type : 'POST',
			
			url : "doCargarSubMarca.htm",
			data : {
				coMarca : $("#coMarca").val()
			},
			   
			success : cambiarComboMarca
		});
	}
	
	
	function cambiarComboMarca(data){

		$(data).each(function(index,item){

	    getNuevoCombo='<option value="'+item.idSubMarca+'">'+item.nombreSubMarca+'</option>';

		      $("#coSubMarca").append(getNuevoCombo);

		})



		}
	
	
	
	
	

	function cambioAgregar(){



	$("#botonAgregar").show();
	$("#txtAgregar").show();




	}


	function doAjax(){

	var selec= $("#selCombo").val();
	var hacer; 


	switch(selec)
	{
	case '1': hacer = "doAgregarMarca.htm";
	break;
	case '2': hacer= "doAgregarCategoria.htm";
	break;
	

	}

		$.ajax({
			type : 'POST',
			
			url : hacer,
			data : {
				nombre : $("#txtAgregar").val()
			},
			   
			success : cambiarComboSubCategoria
		});
		


	}

	
	
	function volvi(){
		
		
		alert("volvi");
	}
	
	function doAjaxSub(selec){
		var hacer; 
		var iden;
		switch(selec)
		{
		case 1: hacer = "doAgregarSubMarca.htm";
		 		iden= $("#coMarca").val();
		break;
		case 2: hacer= "doAgregarSubCategoria.htm";
				iden= $("#coCategoria").val();
		break;
		
		}
		
		alert(iden);
		
		$.ajax({
			type : 'POST',
			
			url : hacer,
			data : {
				nombre : $('#txtAgregarSub').val(),
				id : iden
			},
			   
			success : volvi
		});
		}
		
	
	
</script>



</head>
<body>





	<div id="divAgregar">
		<p>Agregar</p>
		<SELECT id="selCombo" SIZE=1 onChange="cambioAgregar()">

			<OPTION VALUE="null">Seleccione...</OPTION>
			<OPTION VALUE="1">Marca</OPTION>
			<OPTION VALUE="2">Categoria</OPTION>

		</SELECT>
		 <br />
		 <input type="text" id="txtAgregar" hidden="true" /> 
		 <br /> 
		 <input type="submit" id="botonAgregar" onclick="doAjax()" hidden="true" />

	</div>


	<form:form method="post" name="cargaUsuario" id="cargaUsuario"
		action="doCargarProducto.htm" modelAttribute="productodto">




		<table border="1">

			<p>Marca</p>
			<form:select path="marca" id="coMarca" onchange="cargaSubMarca()">
				<form:options items="${marcas.marca}" itemValue="idMarca"
					itemLabel="nombreMarca" />

			</form:select>
			
			
			<p>Agregar Submarca</p>
			<input type="button" id="submarca" value="Agregar" onclick="$('#submarca').hide();$('#txtAgregarSub').show();$('#agregarSubmarca').show()"  />
			 <input type="text" id="txtAgregarSub" hidden="true" />
			 <input type="button" id="agregarSubmarca" value="Agregar" onclick="doAjaxSub(1)" hidden="true"  />
			

			<p>Sub Marca</p>
			<form:select path="subMarca" id="coSubMarca">
				<form:options items="${marcas.subMarcas}" itemValue="nombreSubMarca"
					itemLabel="nombreSubMarca" id="subMarca_idMarca" />
					
					
					

			</form:select>


			<p>Categoria</p>
			<form:select path="categoria" id="coCategoria" onchange="cargarSubCategoria()">
				<form:options items="${marcas.categorias}"
					itemValue="idCategoria" itemLabel="nombreCategoria" />

	

			</form:select>
			
			
			
			
			<p>Sub Categoria</p>
			<form:select path="subCategoria" id="coSubCategoria">
				<form:options items="${marcas.subCategorias}"
					itemValue="nombreSubCategoria" itemLabel="nombreSubCategoria" />

			</form:select>



			<tr>
				<th>Nombre Producto:</th>
				<td><form:input path="denominacion_legal" id="nombreProductoID" /></td>
			</tr>

			<tr>
				<th>Valor Energetico:</th>
				<td><form:input path="valor_energetico" id="valorEnergeticoID" /></td>
			</tr>




			<tr>
				<th>Carbohidratos:</th>
				<td><form:input path="carbohidratos" id="carbohidratosID" /></td>
			</tr>

			<tr>
				<th>Proteinas:</th>
				<td><form:input path="proteinas" id="proteinasID" /></td>
			</tr>

			<tr>
				<th>Grasas Totales:</th>
				<td><form:input path="grasas_totales" id="grasasTotalesID" /></td>
			</tr>

			<tr>
				<th>Grasas Saturadas:</th>
				<td><form:input path="grasas_saturadas" id="grasasSaturadasID" /></td>
			</tr>

			<tr>
				<th>Grasas Trans:</th>
				<td><form:input path="grasas_trans" id="grasasTransID" /></td>
			</tr>

			<tr>
				<th>Grasas Mono insaturadas:</th>
				<td><form:input path="grasas_monoinsaturadas"
						id="grasasMonoInsaturadasID" /></td>
			</tr>

			<tr>
				<th>Grasas Poli insaturadas:</th>
				<td><form:input path="grasas_poli_insaturadas"
						id="grasasPoliInsaturadasID" /></td>
			</tr>

			<tr>
				<th>Colesterol:</th>
				<td><form:input path="colesterol" id="colesterolID" /></td>
			</tr>

			<tr>
				<th>Fibra Alimentaria:</th>
				<td><form:input path="fibra_alimentaria" id="fibraAlimentariaID" /></td>
			</tr>

			<tr>
				<th>Sodio:</th>
				<td><form:input path="sodio" id="sodioID" /></td>
			</tr>

			<tr>
				<th>Porcion:</th>
				<td><form:input path="porcion" id="porcionID" /></td>
			</tr>

			<tr>
				<th>RNPA:</th>
				<td><form:input path="rnpa" id="rnpaID" /></td>
			</tr>
			
						<p>Saludable</p>
			<form:select path="saludable" id="coMarca">
	                 <form:option value="true" label="verdadero" />
	                       <form:option value="false" label="falso" />


			</form:select>


						<p>Apto para celiacos</p>
			<form:select path="celiacos" id="coMarca">
	                 <form:option value="true" label="verdadero" />
	                       <form:option value="false" label="falso" />


			</form:select>


			<tr>
				<td colspan="2"><input type="submit" value="Cargar" /></td>
			</tr>

		</table>

	</form:form>

</body>
</html>